分類: UIKit學習

前言：旅遊app到目前為止大致功能有做出來，但因為是日本的app，我不知道API去哪裡找XD，所以為了模擬之後從網路請求資料以及連到下一個畫面的WebView，自己寫一個簡單的假JSON檔，來放到TableViewCell裡面並轉換到下一個畫面的WebView，來實現類似的功能。

1. 在專案中新增資料，選empty，命名成demo.json，用來放假JSON。
   

2. 自訂JSON，如下：

{
    "websites": [{
                "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTv1MkpS5CNmx1yO5wvWOhcRKGmXDuBszZNSr9iu2vm5LUFlSIzlQ",
                "title": "apple",
                "webAddress": "https://www.apple.com"
                }, {
                "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK309oNr5an1_2RHdkSxmwmP0Utk8kmHC9wcChDcuDok3eC9QBJw",
                "title": "yahoo",
                "webAddress": "https://tw.yahoo.com"
                }, {
                "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdIYVKsFu-OiSaCfsmlZXL1mZCcMhKPu0bH2kLMHpfuwEfUyK8RQ",
                "title": "google",
                "webAddress": "https://www.google.com.tw"
                }, {
                "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5A-MQIou5XIJdvVdI_o7eplHUMSPxE-AzA5Sq36etzsfJmPNO",
                "title": "hackmd",
                "webAddress": "https://hackmd.io"
                }, {
                "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_qPcnfqhIRTcvfT-ghpKpiP15X9jHl8nS9GBAuaUJFlhOJnP2qQ",
                "title": "trip advisor",
                "webAddress": "https://www.tripadvisor.com.tw"
                }, {
                "image": "https://tw.openrice.com/images/or/a_home_header_logo_or_TC_desktop.png",
                "title": "openRice",
                "webAddress": "https://tw.openrice.com/zh/taipei"
                }, {
                "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvsL_kq22A1e6GCsBUXwid58QVGIBR10k_L4ZLjpRktr_qlgGmA",
                "title": "icloud",
                "webAddress": "https://www.icloud.com"
                }]
}

3. 自訂一個struct或class來接收JSON格式。
   

裡面的程式碼為

import Foundation
struct JSONData: Codable {
    var websites:[Website]

    struct Website: Codable {
        var image:String
        var title:String
        var webAddress:String
    }
}

以下步驟有一些在前面說過在這邊就大略說明：
4. 建立一個TableView，以及自訂一個TableViewCell，Cell裡面包含Button、ImageView、Label這邊就不多做解釋。
5. 建立一個ViewController，命名為WebViewController，並與放TableView的ViewController建立Segue，Segue名稱為”connectWebSegue”
6. 在原本的ViewController以JSON decoder來處理，可參考類似Day 19的做法。
7. 在TableViewCell中寫入一個protocol，來偵測是哪個Cell的Button被點按。

protocol TableViewCellButtonTapped{
    func buttonBeTapped(index: IndexPath)
}

8. 在ViewController去實作該方法：

 func buttonBeTapped(index: IndexPath) {                                   
        performSegue(withIdentifier: "connectWebSegue", sender: websitesData?.websites[index.row].webAddress)
    }

9. 再利用prepare(for segue: UIStoryboardSegue, sender: Any?)方法把網址傳過去。
10. 在WebViewController載入網頁。
    結果如下：